<template>
  <div>
    <div class="good-list">
      <router-link
        tag="div"
        :to="'/home/goodsInfo/' + item.id"
        class="good-item"
        v-for="(item, i) in list"
        :key="i"
      >
        <div class="image">
          <img :src="item.url" alt="" />
        </div>
        <h1 class="title">{{ item.content }}</h1>
        <div class="info">
          <p class="price">
            <span class="new">{{ item.newPrice }}</span>
            <span class="old">{{ item.oldPrice }}</span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩余{{ item.quantity }}件</span>
          </p>
        </div>
      </router-link>
    </div>
    <mt-button type="danger" size="large" @click="loadMore">加载更多</mt-button>
  </div>
</template>

<script>
import phone1 from "../../images/phone1.png";
import phone2 from "../../images/phone2.png";
import phone3 from "../../images/phone3.png";
export default {
  data() {
    return {
      list: [
        {
          id: 20,
          url: phone1,
          content: "华为(HUAWEI)荣耀，6plus 16G 双4G版",
          newPrice: "¥2195",
          oldPrice: "¥2400",
          quantity: "60",
        },
        {
          id: 21,
          url: phone2,
          content: "小米(MI)小米Note，16G 双网通版",
          newPrice: "¥5780",
          oldPrice: "¥6388",
          quantity: "200",
        },
        {
          id: 22,
          url: phone3,
          content: "苹果(Apple) iphone6plus 16G（联通三网版）",
          newPrice: "¥4799",
          oldPrice: "¥5000",
          quantity: "100",
        },
        {
          id: 23,
          url: phone1,
          content: "华为(HUAWEI)荣耀，6plus 16G 双4G版",
          newPrice: "¥2195",
          oldPrice: "¥2400",
          quantity: "60",
        },
        {
          id: 24,
          url: phone2,
          content: "小米(MI)小米Note，16G 双网通版",
          newPrice: "¥5780",
          oldPrice: "¥6388",
          quantity: "200",
        },
        {
          id: 25,
          url: phone3,
          content: "苹果(Apple) iphone6plus 16G 4G手机(联通三网版)",
          newPrice: "¥4799",
          oldPrice: "¥5000",
          quantity: "100",
        },
      ],
    };
  },
  methods: {
    loadMore() {
      var newList = [
        {
          url: phone1,
          content: "华为(HUAWEI)荣耀，6plus 16G 双4G版",
          newPrice: "¥2195",
          oldPrice: "¥2400",
          quantity: "60",
        },
        {
          url: phone2,
          content: "小米(MI)小米Note，16G 双网通版",
          newPrice: "¥5780",
          oldPrice: "¥6388",
          quantity: "200",
        },
        {
          url: phone3,
          content: "苹果(Apple) iphone6plus 16G（联通三网版）",
          newPrice: "¥4799",
          oldPrice: "¥5000",
          quantity: "100",
        },
      ];
      this.list = this.list.concat(newList);
    },
  },
};
</script>

<style scoped>
.good-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 10px 0;
}
.good-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 49%;
  margin-bottom: 10px;
  padding: 2px;
  /* border: 1px solid #ccc; */
  box-shadow: 0 0 7px #ccc;
}
.image {
  width: 100%;
  height: 200px;
}
.image img {
  width: 100%;
  height: 100%;
}
.title {
  margin-top: 10px;
  margin-bottom: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #000;
}
.info {
  background-color: #eee;
  overflow: hidden;
}
.price {
  padding: 2px 2px 0;
  margin: 3px;
}
.sell {
  display: flex;
  justify-content: space-between;
  margin: 3px;
  font-size: 12px;
}
.new {
  margin-right: 8px;
  font-size: 16px;
  color: red;
  font-weight: 700;
}
.old {
  font-size: 12px;
  text-decoration: line-through;
}
</style>